/*
* @Author: karry
* @Date:   2020-02-22 18:44:52
* @Last Modified by:   karry
* @Last Modified time: 2020-02-22 18:44:52
*/
import React 	 			from 'react';
import MUtil 				from 'util/db.jsx';
import Product 				from 'service/product-service.jsx';
import PageTitle  			from 'component/page-title/index.jsx';
import CategorySelector  	from './category-selector.jsx';

import './save.scss';

const _db 	= new MUtil();
const _product = new Product();

class ProdcutDetail extends React.Component{
	constructor(props){
		super(props);
		this.state = {
			id 					: this.props.match.params.pid,
			name  				: '',
			subtitle 			: '',
			categoryId 			: 0,
			parentCategoryId 	: 0,
			subImages 			: [],
			price 				: '',
			stock 				: '',
			detail 				: '',
			status 				: 1 //商品状态为1，表示在售
		}
	}
	componentDidMount(){
		this.loadProduct();
	}
	// 加载商品详情
	loadProduct(){
		// 有id的时候，表示是编辑功能，需要表单回填
		if (this.state.id) {
			_product.getProduct(this.state.id).then((res) => {
				let images = res.subImages.split(',');
				res.subImages = images.map((imgUri) => {
					return{
						uri : imgUri,
						url : res.imageHost + imgUri
					}
				});
				this.setState(res);
			},(errMsg) =>{
				_db.errorTips(errMsg);
			});
		}
	}
    // 提交表单
    onSubmit(){
    	let product = {
    		name 		: this.state.name,
    		subtitle 	: this.state.subtitle,
    		categoryId 	: parseInt(this.state.categoryId),
    		subImages 	: this.getSubImagesString(),
    		detail 		: this.state.detail,
    		price 		: parseFloat(this.state.price),
    		stock 		: parseInt(this.state.stock),
    		status 		: this.state.status
    	},
    	productCheckResult = _product.checkProduct(product);
		if (this.state.id) {
			product.id = this.state.id;
		}
		// 表单验证成功
		if (productCheckResult.status) {
			_product.saveProduct(product).then((res) => {
				_db.successTips(res);
				this.props.history.push('/product/index');
			},(errMsg) => {
				_db.errorTips(errMsg);
			});
		}
		// 表单验证失败
		else{
			_db.errorTips(productCheckResult.msg);
		}
    }
	render(){
		return(
			<div id="page-wrapper">
				<PageTitle title="商品详情" />
				<div className="form-horizontal">
				  	<div className="form-group">
				    	<label  className="col-md-2 control-label">商品名称</label>
				    	<div className="col-md-5">
				    		<p className="form-control-static">{this.state.name}</p>
				    	</div>
				  	</div>
				  	<div className="form-group">
				    	<label  className="col-md-2 control-label">商品描述</label>
				    	<div className="col-md-5">
				      		<p className="form-control-static">{this.state.subtitle}</p>    	
				      	</div>
				  	</div>
				  	<div className="form-group">
				    	<label  className="col-md-2 control-label">所属分类</label>
				    	<CategorySelector readOnly categoryId={this.state.categoryId} parentCategoryId={this.state.parentCategoryId} />
				  	</div>
				  	<div className="form-group">
				    	<label  className="col-md-2 control-label">商品价格</label>
				    	<div className="col-md-3">
				      		<div className="input-group">
						  		<input type="number" className="form-control" readOnly value={this.state.price} />
						  		<span className="input-group-addon">元</span>
							</div>
				    	</div>
				  	</div>
				  	<div className="form-group">
				    	<label  className="col-md-2 control-label">商品库存</label>
				    	<div className="col-md-3">
				    		<div className="input-group">
						  		<input type="number" className="form-control" readOnly value={this.state.stock} />
						  		<span className="input-group-addon">件</span>
							</div>
				    	</div>
				  	</div>
				  	<div className="form-group">
				    	<label  className="col-md-2 control-label">商品图片</label>
				    	<div className="col-md-10">
				    		{
				    			this.state.subImages.length ? this.state.subImages.map(
									(image,index) => (
										<div className="img-con" key={index} >
											<img className="img" src={image.url} />
										</div>)
				    			) : (<div>暂无图片</div>)
				    		}
				    	</div>
				  	</div>
				  	<div className="form-group">
				    	<label  className="col-md-2 control-label">商品详情</label>
				    	<div className="col-md-10" dangerouslySetInnerHTML={{__html: this.state.detail}}>
				    	</div>
				  	</div>
				</div>
			</div>
		)
	}
}

export default ProdcutDetail;